<template>
  <el-menu
    router
    default-active="this.$router.path"
    class="el-menu-vertical-demo"
    :collapse="isCollapse"
  >
    <el-sub-menu index="1">
      <template #title>
        <el-icon><location /></el-icon>
        <span>首页</span>
      </template>
      <el-menu-item index="/admin/adminhome"
        ><el-icon><location /></el-icon><span>首页</span></el-menu-item
      >
      <el-menu-item index="1-2"
        ><el-icon><Aim /></el-icon><span>看板</span></el-menu-item
      >
      <el-menu-item index="1-3"
        ><el-icon><Mouse /></el-icon><span>工作台</span></el-menu-item
      >
    </el-sub-menu>
    <el-sub-menu index="2">
      <template #title>
        <el-icon><icon-menu /></el-icon>
        <span>网站配置</span>
      </template>
      <el-menu-item index="/admin/mycenter">
        <el-icon><User /></el-icon>
        <span>个人中心</span>
      </el-menu-item>
      <el-menu-item index="/admin/userform">
        <el-icon><Avatar /></el-icon><span>用户管理</span></el-menu-item
      >
      <el-menu-item index="/admin/usermessage">
        <el-icon><document /></el-icon><span>意见管理</span></el-menu-item
      >
      <el-menu-item index="/admin/exchange">
        <el-icon><Star /></el-icon><span>兑换码管理</span></el-menu-item
      >
      <el-menu-item index="/admin/order">
        <el-icon><Goods /></el-icon><span>订单管理</span></el-menu-item
      >
    </el-sub-menu>
    <el-menu-item index="3">
      <el-icon><setting /></el-icon>
      <span>系统日志</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  User,
  Avatar,
  Aim,
  Mouse,
  Star,
  Goods,
} from "@element-plus/icons-vue";
export default {
  data() {
    return {
      isCollapse: true,
      iswidth: false,
      clientWidth: 0,
      timer: false,
    };
  },

  components: {
    Document,
    IconMenu,
    Location,
    Setting,
    User,
    Avatar,
    Aim,
    Mouse,
    Star,
    Goods,
  },
  created() {
    //调用windowwidth方法 传入当前页面宽度
    this.windowchange(document.documentElement.clientWidth);
  },
  mounted() {
    //调整窗口事件，当窗口大小变化的时候 调用函数
    window.onresize = () => {
      return (() => {
        this.clientWidth = `${document.documentElement.clientWidth}`;
      })();
    };
  },
  watch: {
    clientWidth(value) {
      if (!this.timer) {
        this.clientWidth = value;
        this.timer = true;
        setTimeout(function () {
          this.timer = false;
        }, 500);
      }
      this.windowchange(value);
    },
  },
  methods: {
    windowchange(value) {
      this.clientWidth = value;
      if (this.clientWidth > 1000) {
        this.isCollapse = false;
      } else {
        this.isCollapse = true;
      }
    },
    gorouter(key) {
      console.log(key);
      this.$emit("gorouter");
      // this.$router.push('/admin/usermessage')
    },
  },
};
</script>

<style lang="scss" scoped>
span {
  color: #000;
}
.el-menu {
  width: 100%;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 100%;
  height: 100%;
  // min-height: 400px;
}
.widthclass {
  width: 250px;
  min-height: 400px;
}
</style>